'use strict';

import React, {PropTypes} from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import Global from '../Commom/GlobalConst';

import ViewPager from 'react-native-viewpager';
const {width} = Global.Const.size;

const styles = StyleSheet.create({
    itemBox: {
        width,
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: 'white',
        marginTop: 10,
        marginBottom: 20
    },
    itemContent: {
        width: width / 2,
        alignItems: 'center',
    },
    itemAvatar: {
        width: 50,
        height: 50,
        borderRadius: 25,
    },
    itemName: {
        fontSize: 13,
        marginTop: 5,
        color: Global.FontColor.DimGray,
    },
    itemSubtitle: {
        fontSize: 11,
        paddingLeft: 20,
        paddingRight: 20,
        color: Global.FontColor.LightGrey
    }
});

class FarmerStoryView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ViewPager.DataSource({
                pageHasChanged: (p1, p2) => p1 !== p2,
            }),
        };
    }

    componentDidMount() {
        let farmer_story = this.props.farmer_story;
        console.log('farmer_story', farmer_story);
        this.setState({
            dataSource: this.state.dataSource.cloneWithPages(farmer_story),
        });
    }

    _renderPage(page) {

        return (
            <View style={styles.itemBox}>
                {
                    page ?
                        page.map((item, index) => {
                            return (
                                <TouchableOpacity key={'farmer' + index}
                                                  onPress={() => this.props.onItemClick(item.id)}>
                                    <View style={styles.itemContent}>
                                        <Image style={styles.itemAvatar} source={{uri:item.avatar}}/>
                                        <Text numberOfLines={1} style={styles.itemName}>{item.name}</Text>
                                        <Text numberOfLines={1} style={styles.itemSubtitle}>{item.introduce}</Text>
                                    </View>
                                </TouchableOpacity>
                            )
                        })
                        : null
                }
            </View>
        )
    }

    render() {
        let farmer_story = this.props.farmer_story;
        return (
            <View style={{flex: 1, marginBottom: 10}}>
                <View style={{padding: 15,paddingBottom: 10,flexDirection: 'row',alignItems: 'center'}}>
                    <Image style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                           source={require('../../Image/icon_gary_story.png')}
                    />
                    <Text style={{color: Global.FontColor.DimGray, fontSize: 16}}>
                        农人故事
                    </Text>
                </View>
                { farmer_story.length > 1 && farmer_story.length != 0 ? <ViewPager
                    isLoop={false}
                    dataSource={this.state.dataSource}
                    renderPage={(page) => this._renderPage(page)}
                    autoPlay={false}
                /> : <View style={styles.itemBox}>
                    {
                        farmer_story[0] ?
                            farmer_story[0].map((item, index) => {
                                return (
                                    <TouchableOpacity key={'farmer' + index}
                                                      onPress={() => this.props.onItemClick(item.id)}>
                                        <View style={styles.itemContent}>
                                            <Image style={styles.itemAvatar} source={{uri:item.avatar}}/>
                                            <Text numberOfLines={1} style={styles.itemName}>{item.name}</Text>
                                            <Text numberOfLines={1} style={styles.itemSubtitle}>{item.introduce}</Text>
                                        </View>
                                    </TouchableOpacity>
                                )
                            })
                            : null
                    }
                </View>}
            </View>
        )
    }

}

export default FarmerStoryView;